<mat-toolbar class="title" color="primary">
  <div>Settings</div>
  <button mat-icon-button (click)="onNoClick()">
    <mat-icon>close</mat-icon>
  </button>
</mat-toolbar>

<div mat-dialog-content>
  <div class="example-container">
    <div>
      <mat-form-field appearance="fill">
        <mat-label>Chart Title</mat-label>
        <input matInput [(ngModel)]="chartTitle" >
      </mat-form-field>

      <mat-form-field appearance="fill">
        <mat-label >Chart Type</mat-label>
        <mat-select [(ngModel)]="chartType" (selectionChange)="updateResult()">
          <mat-option *ngFor="let type of chartTypeList" [value]="type">
            {{ type | titlecase }}
          </mat-option>
        </mat-select>
      </mat-form-field>
      
      <mat-form-field appearance="fill">
        <mat-label >Format</mat-label>
        <mat-select [(ngModel)]="format" (selectionChange)="updateResult()">
          <mat-option value="row">Default</mat-option>
          <mat-option value="number">Numbers</mat-option>
          <mat-option value="short">Short</mat-option>
          <mat-option value="bytes">Bytes</mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    
    <div>
      <mat-form-field appearance="fill">
        <mat-label>Panel Datasource</mat-label>
        <mat-select [(ngModel)]="panelDataSource" (selectionChange)="onPanelDatasource()">
          <mat-option value="influxDB">InfluxDB</mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field appearance="fill">
        <mat-label>Database</mat-label>
        <mat-select [(ngModel)]="database" (selectionChange)="onDatabase()">
            <mat-option *ngFor="let item of databaseList" [value]="item.value">
              {{ item.name }}
            </mat-option>
          </mat-select>
      </mat-form-field>

      <mat-form-field appearance="fill">
        <mat-label>Retention Policy</mat-label>
        <mat-select [(ngModel)]="retentionPolicy">
          <mat-option *ngFor="let item of retentionPolicyList" [value]="item.value">
            {{ item.name }}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <button mat-raised-button color="primary" (click)="addRecord()">Add</button>
    </div>

    <div>
      <h5>Query</h5>
      <table mat-table [dataSource]="dataSource" style="width: 100%; margin-bottom: 1rem;" #table> 

        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef> No. </th>
          <td mat-cell *matCellDef="let element"> {{element.id}} </td>
        </ng-container>

        <ng-container matColumnDef="panelDataSource">
          <th mat-header-cell *matHeaderCellDef> Panel Data Source </th>
          <td mat-cell *matCellDef="let element"> {{element.panelDataSource}} </td>
        </ng-container>

        <ng-container matColumnDef="database">
          <th mat-header-cell *matHeaderCellDef> Database </th>
          <td mat-cell *matCellDef="let element"> {{element.database}} </td>
        </ng-container>

        <ng-container matColumnDef="retentionPolicy">
          <th mat-header-cell *matHeaderCellDef> Retention Policy </th>
          <td mat-cell *matCellDef="let element"> {{element.retentionPolicy}} </td>
        </ng-container>

        <ng-container matColumnDef="buttons">
          <th mat-header-cell *matHeaderCellDef> 
            <mat-icon>edit</mat-icon>
          </th>
          <td mat-cell *matCellDef="let element" style="text-align: right;">
            <button mat-icon-button color="primary" aria-label="Delete"
              (click)="deleteRecord(element.id)">
              <mat-icon>delete</mat-icon>
            </button>
            <button mat-icon-button color="primary" aria-label="Edit"
              (click)="editRecord(element)">
              <mat-icon>edit</mat-icon>
            </button>
          </td>
        </ng-container>
        
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
 
      <mat-tab-group mat-stretch-tabs
        [selectedIndex]="!!apiQueryValue ? 1 : 0"
        style="margin-bottom: 1rem;"
        class="mat-elevation-z4"
        *ngIf="detailShow">
        
        <mat-tab label="Fields" *ngIf="!apiQueryValue"> 
          <div style="padding: 1rem">
            <mat-form-field appearance="fill" style="width: 100%;"><!-- Measurement -->
              <mat-label>Measurement</mat-label>
              <mat-select [(ngModel)]="measurement" (selectionChange)="onMeasurement()">
                <mat-option *ngFor="let item of measurementList" [value]="item.value">
                  {{ item.name }}
                </mat-option>
              </mat-select>
            
            </mat-form-field>
            <mat-form-field appearance="fill" style="width: 100%;"><!-- Counter -->
              <mat-label>Counter</mat-label>
              <mat-chip-list class="chips-container counter" (click)="selectCounter.open()">
                <mat-chip class="custom-mat-chip"
                  *ngFor="let item of counter.value"
                  [selectable]="false"
                  [removable]="true"
                  (click)="selectCounter.open()"
                  (removed)="remove(item, 'counter')">
                  {{item}}
                  <mat-icon matChipRemove >cancel</mat-icon>
                </mat-chip>
              </mat-chip-list>
              <mat-select multiple
                class="chips-container-selector counter"
                [formControl]="counter"
                #selectCounter
                (selectionChange)="onDetails('counter')">
                <mat-option *ngFor="let item of counterList" [value]="item.value">
                  {{ item.name }}
                </mat-option>
              </mat-select>
              
            </mat-form-field>
            <mat-form-field appearance="fill" style="width: 100%;"><!-- Tag -->
              <mat-label>Tag</mat-label>
              <mat-chip-list class="chips-container tags" (click)="selectTags.open()">
                <mat-chip class="custom-mat-chip"
                  *ngFor="let item of tags.value"
                  [selectable]="false"
                  [removable]="true"
                  (click)="selectTags.open()"
                  (removed)="remove(item, 'tags')">
                  {{item}}
                  <mat-icon matChipRemove >cancel</mat-icon>
                </mat-chip>
              </mat-chip-list>
              <mat-select
                multiple
                class="chips-container-selector tags"
                [formControl]="tags"
                #selectTags
                (selectionChange)="onDetails('tags')">
                <mat-option *ngFor="let item of tagsList" [value]="item.value">
                  {{item.name}}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field appearance="fill" style="width: 100%;"><!-- Values -->
              <mat-label>Values</mat-label>
              <mat-chip-list class="chips-container values" (click)="selectValues.open()">
                <mat-chip class="custom-mat-chip"
                  *ngFor="let item of values.value"
                  (click)="selectValues.open()"
                  [selectable]="true"
                  [removable]="true"
                  (removed)="remove(item, 'values')">
                  {{item}}
                  <mat-icon matChipRemove >cancel</mat-icon>
                </mat-chip>
              </mat-chip-list>
              <mat-select
                #selectValues
                class="chips-container-selector values"
                [formControl]="values"
                multiple
                (selectionChange)="onDetails('values')">
                <mat-option value="default">Default</mat-option>
              </mat-select
              >
            </mat-form-field>
            <div>
              <mat-checkbox [(ngModel)]="isSum" (change)="onDetails('sum')">Sum</mat-checkbox>
            </div>
          </div>
        </mat-tab>
        <mat-tab label="Query">
          <div style="padding: 1rem">
            <label>Variables:</label>
            <blockquote>:retention:</blockquote>
            <blockquote>:measurement:</blockquote>
            <blockquote>:from:</blockquote>
            <blockquote>:to:</blockquote>
            <blockquote>:interval:</blockquote>
            <blockquote>:limit:</blockquote>
            <div>
              <mat-form-field appearance="fill" style="width: 100%;">
                <mat-label>API Query Value</mat-label>
                <textarea  matInput [(ngModel)]="apiQueryValue" (change)="onDetails('raw', apiQueryValue)" ></textarea>
              </mat-form-field>
            </div>
          </div>
        </mat-tab>
      </mat-tab-group>
    </div>
  </div>
</div>

<div mat-dialog-actions style="float: right; margin-bottom: 0rem;">
  <button mat-raised-button (click)="onNoClick()">Cancel</button>
  <button mat-raised-button color="primary" [mat-dialog-close]="outputObject" cdkFocusInitial>Save</button>
</div>
